<template>
  <div class="app-car-container">
    <CustomContent>
      <template v-slot:body>
        <div>
          <el-descriptions :column="1">
            <el-descriptions-item label="车型名称">
              {{ carModelName }}
            </el-descriptions-item>
          </el-descriptions>

          <MmvTitle title="调价历史"></MmvTitle>
          <el-table
            height="450px"
            v-loading="loading"
            :data="priceList"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            border
          >
            <el-table-column
              key="createTime"
              align="center"
              prop="createTime"
              label="操作时间"
              fixed="left"
              min-width="180"
            >
            </el-table-column>
            <el-table-column
              key="priceNo"
              align="center"
              prop="priceNo"
              label="工单编号"
              fixed="left"
              min-width="180"
            >
            </el-table-column>
            <el-table-column
              key="userName"
              align="center"
              prop="userName"
              label="操作人"
              fixed="left"
              min-width="180"
            >
            </el-table-column>
            <el-table-column
              key="priceType"
              align="center"
              prop="priceType"
              label="价格类型"
              fixed="left"
              min-width="180"
            >
              <template v-slot="{ row }">
                {{ row.priceType | priceType }}
              </template>
            </el-table-column>
            <el-table-column
              key="remark"
              align="center"
              prop="remark"
              label="名称"
              min-width="180"
            >
              <template v-slot="{ row }">
                {{ row.remark || "--" }}
              </template>
            </el-table-column>
            <el-table-column
              key="vaildTime"
              align="center"
              prop="vaildTime"
              label="生效时间"
              min-width="180"
            >
              <template v-slot="{ row }">
                <template v-if="row.priceType > 1">
                  {{ row.startTime }}至{{ row.endTime }}
                </template>
                <template v-else> -- </template>
              </template>
            </el-table-column>
            <template v-if="sysPlatforms.length > 0">
              <el-table-column
                v-if="sysPlatforms.includes('xc')"
                key="xc"
                align="center"
                prop="xc"
                label="携程"
                min-width="180"
              >
                <template v-slot="{ row }">
                  <div class="flex-column-center" v-if="row.xcWeekdayPrice">
                    <template v-if="row.priceType > 1">
                      <span>日租金:{{ row.xcWeekdayPrice || "--" }}</span>
                    </template>
                    <template v-else>
                      <span>周内:{{ row.xcWeekdayPrice || "--" }}</span>
                      <span>周末:{{ row.xcWeekendPrice || "--" }}</span>
                    </template>
                    <div style="color: red" v-if="row.xcStatus == 3">
                      更新失败
                    </div>
                    <div style="color: green" v-if="row.xcStatus == 2">
                      已更新
                    </div>
                    <div style="color: orange" v-if="row.xcStatus == 1">
                      执行中
                    </div>
                    <!--                      <span>车辆押金:{{ row.xcCarDeposit || '&#45;&#45;' }}</span>
                      <span>违章押金:{{ row.xcViolationDeposit || '&#45;&#45;' }}</span>-->
                  </div>
                  <div class="flex-column-center" v-else>--</div>
                </template>
              </el-table-column>
              <el-table-column
                v-if="sysPlatforms.includes('hl')"
                key="hl"
                align="center"
                prop="hl"
                label="哈啰"
                min-width="180"
              >
                <template v-slot="{ row }">
                  <div class="flex-column-center" v-if="row.hlWeekdayPrice">
                    <template v-if="row.priceType > 1">
                      <span>日租金:{{ row.hlWeekdayPrice || "--" }}</span>
                    </template>
                    <template v-else>
                      <span>周内:{{ row.hlWeekdayPrice || "--" }}</span>
                      <span>周末:{{ row.hlWeekendPrice || "--" }}</span>
                    </template>
                    <div style="color: red" v-if="row.hlStatus == 3">
                      更新失败
                    </div>
                    <div style="color: green" v-if="row.hlStatus == 2">
                      已更新
                    </div>
                    <div style="color: orange" v-if="row.hlStatus == 1">
                      执行中
                    </div>
                    <!--                      <span>车辆押金:{{ row.hlCarDeposit || '&#45;&#45;' }}</span>
                      <span>违章押金:{{ row.hlViolationDeposit || '&#45;&#45;' }}</span>-->
                  </div>
                  <div class="flex-column-center" v-else>--</div>
                </template>
              </el-table-column>
              <el-table-column
                v-if="sysPlatforms.includes('wk')"
                key="wk"
                align="center"
                prop="wk"
                label="悟空"
                min-width="180"
              >
                <template v-slot="{ row }">
                  <div class="flex-column-center" v-if="row.wkWeekdayPrice">
                    <template v-if="row.priceType > 1">
                      <span>日租金:{{ row.wkWeekdayPrice || "--" }}</span>
                    </template>
                    <template v-else>
                      <span>周内:{{ row.wkWeekdayPrice || "--" }}</span>
                      <span>周末:{{ row.wkWeekendPrice || "--" }}</span>
                    </template>
                    <div style="color: red" v-if="row.wkStatus == 3">
                      更新失败
                    </div>
                    <div style="color: green" v-if="row.wkStatus == 2">
                      已更新
                    </div>
                    <div style="color: orange" v-if="row.wkStatus == 1">
                      执行中
                    </div>
                    <!--                      <span>车辆押金:{{ row.wkCarDeposit || '&#45;&#45;' }}</span>
                      <span>违章押金:{{ row.wkViolationDeposit || '&#45;&#45;' }}</span>-->
                  </div>
                  <div class="flex-column-center" v-else>--</div>
                </template>
              </el-table-column>
              <el-table-column
                v-if="sysPlatforms.includes('zzc')"
                key="zzc"
                align="center"
                prop="zzc"
                label="租租车"
                min-width="180"
              >
                <template v-slot="{ row }">
                  <div class="flex-column-center" v-if="row.zzcWeekdayPrice">
                    <template v-if="row.priceType > 1">
                      <span>日租金:{{ row.zzcWeekdayPrice || "--" }}</span>
                    </template>
                    <template v-else>
                      <span>周内:{{ row.zzcWeekdayPrice || "--" }}</span>
                      <span>周末:{{ row.zzcWeekendPrice || "--" }}</span>
                    </template>
                    <div style="color: red" v-if="row.zzcStatus == 3">
                      更新失败
                    </div>
                    <div style="color: green" v-if="row.zzcStatus == 2">
                      已更新
                    </div>
                    <div style="color: orange" v-if="row.zzcStatus == 1">
                      执行中
                    </div>
                    <!--                      <span>车辆押金:{{ row.zzcCarDeposit || '&#45;&#45;' }}</span>
                      <span>违章押金:{{ row.zzcViolationDeposit || '&#45;&#45;' }}</span>-->
                  </div>
                  <div class="flex-column-center" v-else>--</div>
                </template>
              </el-table-column>
              <el-table-column
                v-if="sysPlatforms.includes('at')"
                key="at"
                align="center"
                prop="at"
                label="凹凸"
                min-width="180"
              >
                <template v-slot="{ row }">
                  <div class="flex-column-center" v-if="row.atWeekdayPrice">
                    <template v-if="row.priceType > 1">
                      <span>日租金:{{ row.atWeekdayPrice || "--" }}</span>
                    </template>
                    <template v-else>
                      <span>周内:{{ row.atWeekdayPrice || "--" }}</span>
                      <span>周末:{{ row.atWeekendPrice || "--" }}</span>
                    </template>
                    <div style="color: red" v-if="row.atStatus == 3">
                      更新失败
                    </div>
                    <div style="color: green" v-if="row.atStatus == 2">
                      已更新
                    </div>
                    <div style="color: orange" v-if="row.atStatus == 1">
                      执行中
                    </div>
                    <!--                      <span>车辆押金:{{ row.atCarDeposit || '&#45;&#45;' }}</span>
                      <span>违章押金:{{ row.atViolationDeposit || '&#45;&#45;' }}</span>-->
                  </div>
                  <div class="flex-column-center" v-else>--</div>
                </template>
              </el-table-column>
              <el-table-column
                v-if="sysPlatforms.includes('fz')"
                key="fz"
                align="center"
                prop="fz"
                label="飞猪"
                min-width="180"
              >
                <template v-slot="{ row }">
                  <div class="flex-column-center" v-if="row.fzWeekdayPrice">
                    <template v-if="row.priceType > 1">
                      <span>日租金:{{ row.fzWeekdayPrice || "--" }}</span>
                    </template>
                    <template v-else>
                      <span>周内:{{ row.fzWeekdayPrice || "--" }}</span>
                      <span>周末:{{ row.fzWeekendPrice || "--" }}</span>
                    </template>
                    <div style="color: red" v-if="row.fzStatus == 3">
                      更新失败
                    </div>
                    <div style="color: green" v-if="row.fzStatus == 2">
                      已更新
                    </div>
                    <div style="color: orange" v-if="row.fzStatus == 1">
                      执行中
                    </div>
                    <!--                      <span>车辆押金:{{ row.fzCarDeposit || '&#45;&#45;' }}</span>
                      <span>违章押金:{{ row.fzViolationDeposit || '&#45;&#45;' }}</span>-->
                  </div>
                  <div class="flex-column-center" v-else>--</div>
                </template>
              </el-table-column>
            </template>
            <el-table-column
              key="storeName"
              align="center"
              prop="storeName"
              label="所属门店"
              min-width="180"
            >
            </el-table-column>
            <el-table-column
              key="sysPlatform"
              align="center"
              prop="sysPlatform"
              label="匹配平台"
              min-width="180"
            >
              <templete slot-scope="{ row }">
                {{ formatPlatform(row.sysPlatform) }}
              </templete>
            </el-table-column>
          </el-table>

          <pagination
            :total="total"
            :page.sync="pageNum"
            :limit.sync="pageSize"
            @pagination="getPriceDetail"
          />
        </div>
      </template>

      <template v-slot:footer>
        <div class="footer">
          <el-button type="info" plain @click.native="close">返回</el-button>
        </div>
      </template>
    </CustomContent>
  </div>
</template>

<script>
import MmvTitle from "@/components/MmvUI/MmvTitle.vue";
import CustomContent from "@/components/custom/content.vue";
import * as priceUpdate from "@/api/ota/priceUpdate";

export default {
  components: { MmvTitle, CustomContent },
  dicts: ["ota_order_resource"],
  data() {
    return {
      total: 0,
      pageNum: 1,
      pageSize: 10,
      loading: false,
      carModelId: this.$route.query.carModelId,
      carModelName: this.$route.query.carModelName,
      priceList: [],
    };
  },
  computed: {
    sysPlatforms() {
      const systemPlates = this.dict.type.ota_order_resource.map((item) => {
        return item.value;
      });
      console.log("systemPlates", systemPlates);
      return systemPlates || [];
    },
  },
  methods: {
    formatPlatform(data) {
      let arr = data.split(",");
      // console.log(data.split(','))
      var arr2 = arr.map((ele) => {
        ele == "xc"
          ? (ele = "携程")
          : ele == "hl"
            ? (ele = "哈啰")
            : ele == "wk"
              ? (ele = "悟空")
              : ele == "zzc"
                ? (ele = "租租车")
                : ele == "at"
                  ? (ele = "凹凸")
                  : (ele = "飞猪");
        return ele;
        // console.log(ele);
      });
      // console.log(arr2);

      return arr2.toString();
    },
    getPriceDetail() {
      priceUpdate
        .workDetail({
          carModelId: this.carModelId,
          pageSize: this.pageSize,
          pageNum: this.pageNum,
        })
        .then((res) => {
          this.priceList = res.rows;
          this.total = res.total;
        });
    },
    //关闭
    close() {
      this.$router.go(-1);
      this.$store.dispatch("tagsView/delView", this.$route);
    },
  },
  created() {
    this.getPriceDetail();
  },
};
</script>

<style lang="scss" scoped>
.flex-column-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
